<template>
  <div class="room-members">
      <div class="member player" v-if=" status === 1 ">
          <img :src="player.avatar">
          <div class="info">
              <p class="nickname">{{player.nickname}}</p>
              <p class="state">游戏中</p>
          </div>
      </div>
      <div class="member others" v-if="avatars.length">
          <img v-for="src in avatars" :src="src">
          <div class="info">
              <p class="nickname">{{count}} 人</p>
          </div>
      </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import Echo from "laravel-echo";
  import store from 'store';
  import api from '@/assets/js/api';//接口API
  import {systemConfig} from '@/assets/js/utils';
  import {userInfo} from '@/assets/js/utils';
  export default {
    data() {
      return {
        Echo: null,
        avatars: [],
        count: 0,
        player: {},
        status: -1,
        isInOrderList: false,  //是否在预约队列
        game_id: '',  //当前游戏id
      };
    },
    props: ["doll"],

    computed: {
      dollId() {
        return this.doll;
      }
    },
    created() {
      this.initEcho();  //初始化socket.io
    },
    methods: {
      initEcho() {
        systemConfig(config => {
          this.Echo = new Echo({
            broadcaster: "socket.io",
            host: config.socket_server_host,
            auth: {
              headers: {
                'Authorization': 'Bearer ' + store.get('apiToken')
              }
            }
          });
        });
      },
      enter(player, status) {
        if (player) {
          this.player = player;
        }
        if (status) {
          this.status = status;
        }
        this.members();
      },
      exit() {
        //退出房间
        this.avatars = [];
        this.count = 0;
        this.player = {};
        this.status = -1;
        if (this.Echo) {
          this.Echo.leave("machines." + this.dollId);
          this.Echo.leave("machines." + this.dollId + ".spectators");
          this.gameReservationCancel();
          this.roomAction("exit");
        }
      },
      members() {
        if (this.Echo) {
          this.Echo
            .channel("machines." + this.dollId)
            .listen(".machine.status.changed", e => {
              this.status = e.device_status;
              this.player = e.player;
              this.$emit('statusChange', {
                device_status: e.device_status
              });
              if (e.game_record && e.game_record.id == this.game_id) {
                var operate_result = e.game_record.operate_result;
                this.$emit('result', {
                  operate_result: operate_result
                });
              }
            });
          this.Echo
            .join("machines." + this.dollId + ".spectators")
            .listen(".spectators.changed", e => {
              this.avatars = e.avatars;
              this.count = e.count;
            });
          //进入房间
          this.roomAction("enter");
        }
      },
      roomAction(type) {
        if (this.dollId && this.dollId != '') {
          api.fetch("/api/machines/" + this.dollId + "/room", {
            method: "POST",
            data: {action: type}
          });
        }
      },
      gameReservation(game_id) {
        this.game_id = game_id || '';
        if (!this.isInOrderList) {
          this.Echo
            .join("machines." + this.dollId + ".player_queue")
            .listen(".game.next.turn", e => {
              if (e.user_id == userInfo().id) {
                this.$emit('play', {});
              }
            });
          this.isInOrderList = true;
        }
      },
      gameReservationCancel() {
        if (this.isInOrderList) {
          this.Echo.leave("machines." + this.dollId + ".player_queue");
          this.isInOrderList = false;
        }
      }
    }
  };
</script>
<style lang='less' scoped>
.room-members {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  padding: 0.6rem 0.3rem 0 0.6rem;
  overflow: hidden;
  z-index: 1000;
}
.member {
  height: 0.68rem;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0.4rem;
  box-sizing: border-box;
  padding: 0.1rem;
  display: flex;
  align-items: center;
  color: #fff;
  img {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    margin-right: 0.1rem;
    object-fit: cover;
  }
  &.player {
    float: left;
  }
  &.others {
    float: right;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .state {
    font-size: 0.2rem;
  }
  .nickname {
    font-size: 0.24rem;
  }
}
.player {
  .info {
    .nickname {
      width: 1.3rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.others {
  .info {
    margin-left: 0.02rem;
    .nickname {
      font-size: 0.28rem;
    }
  }
  .state {
    color: #fff;
  }
}
</style>
